import React, { Component } from "react";

class List extends Component {
  state = {};

  remove = (id) => () => {
    this.props.onRemove(id);
  };

  render() {
    return (
      <>
        <ul>
          {this.props.list.map((item) => (
            <li key={item.id} style={{ color: item.checked ? "red" : "" }}>
              <input
                type="checkbox"
                checked={item.checked}
                onChange={(e) =>
                  this.props.onCheckChange(item.id, e.target.checked)
                }
              />
              {item.name} - <button onClick={this.remove(item.id)}>删除</button>
            </li>
          ))}
        </ul>
        <button onClick={this.props.onRemoveAll}>删除所选</button>
      </>
    );
  }
}

export default List;
